/**
 * Created by maxiaoqiang on 2018/6/25.
 */
import React, {Component} from 'react';
import {Row, Col, Icon, Card, Avatar} from 'antd';
import ReactEcharts from 'echarts-for-react';

import {formatMoney, local} from "util/MyUtil";
import {HttpClient} from "util/HttpClient";

import "./index.less";


class UserInfo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            scoreList: [],
            dataList: [],
            data: [],
            score: '',
            pass: ''

        }
    }

    componentDidMount() {
        console.log(local.get("userInfo"));
        HttpClient.get("/v1/paper/count?userId="+local.get("userInfo").id)
            .then((response)=> {
                if (response.data.code == 200) {
                    let lists = response.data.data;
                    let dataList = [];
                    let score = 0;
                    let pass = 0;
                    let max = [];
                    for (let i = 0; i < lists.length; i++) {
                        score = (parseFloat(score)+parseFloat(lists[i].note)).toFixed(2);
                        if(parseFloat(lists[i].note).toFixed(2)>=parseFloat(parseInt(lists[i].passValue.split("%")[0])/100*lists[i].total).toFixed(2)){
                            pass++
                        }
                        max.push(
                            parseFloat(lists[i].note).toFixed(2)
                        )
                    }
                    if (lists.length <= 10) {
                        for (let i = 0; i < lists.length; i++) {
                            dataList.push("成绩" + (i + 1));
                            this.state.scoreList[i] = parseFloat(lists[i].note).toFixed(2);
                        }
                    } else {
                        for (let i = 0; i < 10; i++) {
                            dataList.push("成绩" + (i + 1));
                            this.state.scoreList[i] = parseFloat(lists[i].note).toFixed(2);
                        }
                    }
                    console.log(score , (lists.length > 0 ? lists.length : 1))
                    this.setState({
                        scoreList: this.state.scoreList,
                        dataList: dataList,
                        data: lists,
                        score: score / (lists.length > 0 ? lists.length : 1),
                        pass: parseFloat(pass / (lists.length > 0 ? lists.length : 1) * 100).toFixed(2),
                        max:max.sort()
                    });
                }
            })
    }

    getOption = () => {
        return {
            title: {
                text: '最近十次成绩走势'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.state.dataList,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '分数',
                    type: 'bar',
                    barWidth: '60%',
                    data: this.state.scoreList
                }
            ]
        };
    };


    render() {
        return (
            <div className="user-info-div">
                <Row gutter={24}>
                    <Col className="gutter-col" sm={12} md={6}>
                        <div className="gutter-box">
                            <Icon className="icon" type="form" style={{color: "#64EA91"}}/>
                            <div className="card">
                                <p className="title">答题次数</p>
                                <p className="number">{this.state.data.length > 0 ? formatMoney(this.state.data.length, 0) : 0}</p>
                            </div>
                        </div>
                    </Col>
                    <Col className="gutter-col" sm={12} md={6}>
                        <div className="gutter-box">
                            <Icon className="icon" type="rocket" style={{color: "#8FC9FB"}}/>
                            <div className="card">
                                <p className="title">最高分</p>
                                <p className="number">{this.state.data.length > 0 ? formatMoney(parseFloat(Math.max.apply(null, this.state.max)), 2) : 0}</p>
                            </div>
                        </div>
                    </Col>
                    <Col className="gutter-col" sm={12} md={6}>
                        <div className="gutter-box">
                            <Icon className="icon" type="bar-chart" style={{color: "#D897EB"}}/>
                            <div className="card">
                                <p className="title">平均成绩</p>
                                <p className="number">{formatMoney(this.state.score)}</p>
                            </div>
                        </div>
                    </Col>
                    <Col className="gutter-col" sm={12} md={6}>
                        <div className="gutter-box">
                            <Icon className="icon" type="appstore-o" style={{color: "#F69899"}}/>
                            <div className="card">
                                <p className="title">通过率</p>
                                <p className="number">{this.state.pass}%</p>
                            </div>
                        </div>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col className="gutter-col" sm={24} md={24}>
                        <div className="echars-div">
                            <ReactEcharts
                                option={this.getOption()}
                            />
                        </div>

                    </Col>
                    <Col className="gutter-col" sm={12} md={6} style={{display:"none"}}>
                        <div className="echars-div">
                            <div className="avatar-card">
                                <div>
                                    <img className="trigger-avatar"
                                         src="http://store.cfun-world.cn/avatar/5837d79d9ad961b3a5fc32f62664e609.png?imageView2/2/w/200/h/200/q/75|imageslim"/>
                                </div>
                                <div className="user-info">
                                    <p>小小天空</p>
                                    <p>会员等级: 初级</p>
                                </div>
                            </div>
                            <div className="info-card">
                                <div className="title">所在班级</div>
                                <div>一级建造师</div>
                                <div className="title">所学课程</div>
                                <div>
                                    <span>法律法规</span>
                                    <span>实务</span>
                                    <span>管理</span>
                                </div>
                                <div className="title">最近一次登录时间</div>
                                <div>2018年06月28日12:58:49</div>
                            </div>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }

}

export default UserInfo;